<template>
	<view>
		<u-navbar :title="detail.title" bgColor="transparent" :titleStyle="{'color':'transparent'}">
			<view class="flex" slot="left">
				<view class="nav-left flex">
					<u-icon name="arrow-left" size="24" @click="back"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
					<u-icon name="home" size="24" @click="toHome"></u-icon>
				</view>
			</view>
			<view class="flex" slot="right" :style="{'marginRight':menuWidth + 'px'}">
				<view class="nav-left flex">
					<view class="wx">
						<button open-type="share">
							<u-icon name="share-square" size="24" color="#34314F"></u-icon>
						</button>
					</view>
					<!-- <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
					<view @click="starlikeBtn(2,1,id)">
						<u-icon :name="detail.isLike == 1?'heart-fill':'heart'" size="24"
							:color="detail.isLike == 1?'#FF7F1C':'#34314F'"></u-icon>
					</view> -->
					<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
					<view @click="starlikeBtn(1,1,id)">
						<u-icon :name="detail.isCollection == 1?'star-fill':'star'" size="24"
							:color="detail.isCollection == 1?'#FFBB58':'#34314F'"></u-icon>
					</view>
				</view>
			</view>
		</u-navbar>
		<view v-if="bannerList.length > 0">
			<ban-swiper :list="bannerList" :videoUrl="detail.video"></ban-swiper>
		</view>
		<view class="content-box p30">
			<view v-if="detail.conpTag" class="activity-text flex">
				<text class="text">{{ detail.conpTag }}</text>
				<view class="text text-btn" @tap="handleApply">领取补贴</view>
			</view>
			<view class="flex-jus">
				<view>
					<view class="c343 bold">{{detail.title}}</view>
					<u-gap height="10"></u-gap>
					<view class="f24">{{detail.dictNames}}</view>
				</view>
				<!-- <view class="" @click="maketel(config.phone)">
					<image src="../static/housekeeping/kf.png" mode="widthFix" style="width: 200rpx;"></image>
				</view> -->
				<view class="kefu">
					<button open-type="contact" class="custom-button"></button>
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<view>
				<u-scroll-list :indicator="false">
					<view class="bgFff radius30 menu-item mr30 p20" :class="{'active':skuIndex == index}"
						v-for="(item,index) in skuList" :key="index" @click="skuIndex = index">
						<view class="menu-item-box">
							<view class="c343 f26">{{item.proName}}</view>
							<view class="cyellow">
								<text class="f24">￥</text>
								<text class="f32">{{item.proPrice}}</text>
							</view>
							<!-- <view class="mt10" v-if="detail.isMulti == 2">
								<u-number-box bgColor="#fff" :min="0" buttonSize="20" integer v-model="item.buyCount"
									disabledInput></u-number-box>
							</view> -->
						</view>
					</view>
				</u-scroll-list>
			</view>
			<u-gap height="20"></u-gap>
			<view class="qy-box box_shadow" @click="show_qy = true">
				<view class="flex-jus">
					<view class="flex">
						<image src="../static/housekeeping/star.png" mode="" style="width: 32px;height: 32px;"></image>
						<text class="ml20 c343 bold">用户专享权益保障</text>
					</view>
					<view>
						<u-icon name="arrow-right" color="#34314F"></u-icon>
					</view>
				</view>
			</view>

			<u-gap height="20"></u-gap>
			<view class="c343 f28 bold">详情</view>
			<view class="mt20 f26 c343">
				<u-parse :content="detail.proDesc"></u-parse>
			</view>
			<view class="" v-if="commentList.length > 0">
				<u-gap height="20"></u-gap>
				<view class="f26 bold flex c343">
					<u-icon name="star-fill" color="#FFDE6D" size="20"></u-icon>
					<text class="ml10">{{detail.mark}} · {{detail.observeNumber}}条评价</text>
				</view>
				<u-gap height="10"></u-gap>
				<view>
					<u-scroll-list :indicator="false">
						<view class="mr30 menu-item" v-for="(item,index) in pjTag" :key="index">
							<view class="pj-tag-item c999 f26 textoverflow">
								{{item.dictLabel}} {{item.dictValue}}
							</view>
						</view>
					</u-scroll-list>
				</view>
				<view>
					<u-scroll-list :indicator="false">
						<view class="mr30 menu-item comment-item" v-for="(item,index) in commentList" :key="index"
							@click="nologinJump('/subpage/housekeeping/commentDetail?id='+id+'&com_id='+item.id)">
							<view class="pj-item bgFff radius30 p20 flex-col flex-jus flex-start">
								<view class="">
									<view class="flex">
										<u-rate count="5" v-model="item.score" activeColor="#FFDE6D" readonly></u-rate>
										<text class="f24 c999 ml10">{{item.commentTime}}</text>
									</view>
									<view class="f26 c343 textoverflow2 mt20" v-if="item.content">
										{{item.content}}
									</view>
									<view class="pore flex mt20 mb20" v-if="item.imgsArr.length > 0">
										<!-- <image :src="api_host + item2" mode="widthFix"
											v-for="(item2,index2) in item.imgsArr" :key="index2"
											style="width: 31%;border-radius: 20rpx;margin-right: 10rpx;">
										</image> -->
										<view class="mr10" v-for="(item2,index2) in item.imgsArr.slice(0,3)"
											:key="index2">
											<u-image :src="api_host + item2" mode="aspectFill" width="26vw"
												height="100px" radius="5"></u-image>
										</view>
										<view class="add-count f26" v-if="item.imgsArr.length > 3">
											<text>共{{item.imgsArr.length}}张</text>
										</view>
									</view>
								</view>
								<view class="flex" v-if="item.user">
									<u-image :src="api_host + item.user.userAvatar" mode="" width="40px" height="40px"
										shape="circle"></u-image>
									<view class="ml10">
										<view class="c343 f28">{{item.user.userName}}</view>
										<!-- <view class="c999 f24">黄石港区</view> -->
									</view>
								</view>
								<!-- <view class="mt20 bgF7 radiusBox p20" v-if="item.reply">
									<view class="c343 f26">{{item.reply}}</view>
									<view class="c666 f24 mt10">{{item.replyTime}}</view>
								</view> -->
							</view>
						</view>
					</u-scroll-list>
				</view>
				<view>
					<u-button color="#fff" :customStyle="{'color':'#999','height':'80rpx'}" shape="circle"
						@click="openUrl('/subpage/housekeeping/commentList?id='+id+ '&type=' + 2)">查看全部{{detail.observeNumber}}条评价</u-button>
				</view>
			</view>

		</view>
		<u-gap height="100"></u-gap>
		<view class="fix-bot">
			<view class="fix-bot-box ml30 mr30 bgFff p20 radius30 flex-jus">
				<view class="cyellow">
					<text class="f24">￥</text>
					<text class="f40 bold" v-if="detail.isMulti == 1">{{skuList[skuIndex].proPrice}}</text>
					<text class="f40 bold" v-else>{{amount.toFixed(2)}}</text>
				</view>
				<view>
					<u-button color="#21B9AD" :customStyle="{'color':'#fff','height':'80rpx'}" shape="circle"
						throttleTime="500" @click="createOrder">立即预约</u-button>
				</view>
			</view>
		</view>
		<!-- //权益 -->
		<u-popup :show="show_qy" @close="show_qy = false" @open="show_qy = true" closeable round="20">
			<view class="p30">
				<view class="c343 bold">权益保障</view>
				<u-gap height="30"></u-gap>
				<view class="">
					<view class="flex flex-start mb30" v-for="(item,index) in Equity" :key="index">
						<image class="mt10" src="../static/housekeeping/qy_icon.png" style="width: 16px;height: 16px;"
							mode=""></image>
						<view class="flex1 ml20">
							<view class="f28 bold c343">{{item.protName}}</view>
							<u-gap height="5"></u-gap>
							<view class="f24 c343">
								<u-parse :content="item.protText"></u-parse>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- //优惠券 -->
		<u-popup v-if="show_yhq" :show="show_yhq" @close="show_yhq = false" mode="center"
			:customStyle="{'width':'80%','position':'relative'}" @open="show_yhq = true" round="20"
			bgColor="transparent">
			<view class="p30 pore textC" style="z-index: 99;">
				<view class="c343 bold f40">{{coupon.coupTitle}}</view>
				<u-gap height="50"></u-gap>
				<view class="cfff f46" v-if="coupon.conpType == 1">
					满{{coupon.conpTextObject.fullAmount}}减{{coupon.conpTextObject.deductionAmount}}</view>
				<view class="cfff f46" v-if="coupon.conpType == 2">
					{{coupon.conpTextObject.discount/10}}折，最高减{{coupon.conpTextObject.maxReduction}}
				</view>
				<view class="cfff f46" v-if="coupon.conpType == 3">
					{{coupon.name}}
				</view>
				<u-gap height="50"></u-gap>
				<!-- <view class="cfff f32">全家政通用</view> -->
				<view class="cfff f26" v-if="coupon.lifespanType == 1">有效期: {{coupon.lifespanTextObject.startTime}} -
					{{coupon.lifespanTextObject.endTime}}
				</view>
				<view class="cfff f26" v-if="coupon.lifespanType == 2">有效期: {{coupon.lifespanTextObject.lifespan}}天
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au">
					<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx','width':'50%'}"
						shape="circle" @click="receiveCoupon">领取</u-button>
				</view>
				<u-gap height="30"></u-gap>
				<view class="flex-au" @click="show_yhq = false">
					<u-icon name="close-circle-fill" color="#000" size="26"></u-icon>
				</view>
			</view>
			<image src="https://hxs.dsjhs.com:553/prod-api/profile/yhq_bg.png" mode="widthFix" class="yhq_bg"></image>
		</u-popup>
		<!-- //优惠券领取成功 -->
		<u-popup :show="show_yhq_success" @close="show_yhq_success = false" mode="center"
			:customStyle="{'width':'30%','position':'relative'}" @open="show_yhq_success = true" round="20"
			bgColor="#333">
			<view class="p30 pore textC">
				<image src="../static/housekeeping/coin.png" mode="widthFix" style="width: 87px;"></image>
				<view class="cfff f24">领取成功</view>
			</view>
		</u-popup>
		<view class="back-top pore">
			<u-back-top :scroll-top="scrollTop" bottom="200" :customStyle="{'backgroundColor':'#FFDE6D'}"
				:iconStyle="{'color':'#000','fontSize':'40rpx','fontWeight':'bold'}"></u-back-top>
		</view>
	</view>
</template>

<script>
	import appInfo from '@/common/appInfo.js'
	import {
		getHomedetail,
		receiveCoupon
	} from '@/common/api_housekeeping.js'
	import banSwiper from '@/components/banSwiper/index.vue'
	import {
		rightsProtection
	} from '@/common/api_user.js'
	export default {
		name: '',
		components: {
			banSwiper
		},
		data() {
			return {
				scrollTop: 0,
				id: '',
				Equity: [],
				coupon: {},
				show_qy: false,
				show_yhq: false,
				show_yhq_success: false,
				detail: {},
				commentList: [],
				bannerList: [],
				skuList: [],
				skuIndex: 0,
				pjTag: [],
				rate: 5
			}
		},
		async onLoad(option) {
			this.id = option.id;
			this.rightsProtection();
			await this.$onLaunched;
			this.getHomedetail()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShareAppMessage(res) {
			return {
				title: this.detail.title,
				path: '/subpage/housekeeping/detail?id=' + this.detail.id,
				// desc: this.detail.title,
				content: this.detail.dictNames,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		computed: {
			amount() {
				let amount = 0
				if (this.skuList.length > 0) {
					amount = this.skuList[this.skuIndex].proPrice
				}
				// this.skuList.forEach(function(val, idx, arr) {
				// 	amount += val.buyCount * val.proPrice;
				// }, 0);
				return amount
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			handleApply() {
				uni.navigateTo({
					url: '/subpage/housekeeping/subsidy'
				})
			},
			async getHomedetail() {
				const that = this
				uni.showLoading({
					mask: true
				})
				const res = await getHomedetail({
					id: this.id
				})
				if (res.code == 200) {
					this.detail = res.data
					//this.detail.video = '/profile/upload/2024/07/09/764dc986f18c443f823968ddad7ff941_20240709135957A015.mp4'
					const {
						commentList,
						evaluateList,
						images,
						detailList,
						coupon
					} = this.detail
					this.pjTag = evaluateList;
					this.commentList = commentList.map(item => {
						return {
							...item,
							imgsArr: item.images ? item.images.split(',') : []
						}
					})
					this.bannerList = images.split(',');
					this.coupon = coupon || {};
					if (this.coupon.id) {
						this.show_yhq = true
					}
					if (this.detail.isMulti == 1) {
						this.skuList = detailList.map(item => {
							return {
								...item,
								buyCount: 1
							}
						})
					} else {
						this.skuList = detailList.map(item => {
							return {
								...item,
								buyCount: 0
							}
						})
						this.skuList[0].buyCount = 1
					}

				}
				uni.hideLoading()
			},
			async rightsProtection() {
				uni.showLoading({
					mask: true
				})
				const res = await rightsProtection()
				if (res.code == 200) {
					this.Equity = res.data
				}
				uni.hideLoading()
			},
			createOrder() {
				if (!this.hasLogin) {
					this.toLogin()
					return false
				}
				if (this.detail.isMulti == 1) {
					this.openUrl('/subpage/order/sureorder?id=' + this.id + '&sku_id=' + this.skuList[this.skuIndex].id)
				} else {
					// let hasSku = this.skuList.some(item => item.buyCount > 0)
					// if (!hasSku) {
					// 	uni.showToast({
					// 		title: '请选择服务类型',
					// 		icon: 'none'
					// 	})
					// 	return false
					// }
					let data = []
					this.skuList.forEach(item => {
						item.buyCount = 0
						data.push(item)
					})
					data[this.skuIndex].buyCount = 1
					uni.setStorageSync('proSku', data)
					this.openUrl('/subpage/order/sureorder?id=' + this.id)
				}
			},
			async receiveCoupon() {
				// #ifdef MP-WEIXIN
				let messageRes = await this.$utils.messageSubscriptionAuthorization(appInfo.tmplIds.coupon);
				// #endif
				uni.showLoading({
					mask: true
				})
				const res = await receiveCoupon({
					id: this.coupon.id
				})
				if (res.code == 200) {
					this.show_yhq = false
					this.show_yhq_success = true
					setTimeout(() => {
						this.show_yhq_success = false
					}, 1000)
				}
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F9F6;
	}

	.nav-left {
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		background-color: rgba(#fff, 0.8);
	}

	.swiper {
		height: 500rpx;
	}

	.menu-item {
		margin: 5rpx 10rpx 5rpx 5rpx;
		border: 1px solid transparent;

		.menu-item-box {
			width: 280rpx;
		}
	}

	.activity-text {
		margin-bottom: 20rpx;
		justify-content: space-between;

		.text {
			font-weight: 400;
			font-size: 12px;
			color: #21B9AD;
			line-height: 16px;
			text-align: left;
			font-style: normal;
		}

		.text-btn {
			position: relative;
			padding-right: 32rpx;
			font-weight: 600;

			&::after {
				position: absolute;
				top: 0;
				right: 0;
				width: 32rpx;
				height: 32rpx;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/lvjiantou.png') no-repeat center;
				background-size: 100% 100%;
				content: '';
			}
		}
	}

	.comment-item {}
	
	.kefu {
		// position: fixed;
		// top: 80%;
		// right: 32rpx;
		// z-index: 999;
		
		.custom-button {
			position: relative;
			width: 216rpx;
			height: 96rpx;
			background-color: transparent;
			&::before {
				position: absolute;
				content: '';
				left: 0;
				top: 0;
				width: 216rpx;
				height: 96rpx;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/kf.png') no-repeat center;
				background-size: cover;
				z-index: 999;
			}
			
			&::after {
				border: 0;
				
			}
		}
	}

	.pj-tag-item {
		text-align: center;
		border: 1px solid #999;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
	}

	.pj-item {
		width: 80vw;
		height: 440rpx;
	}

	.active {
		border-color: #FF7F1C;
	}

	.qy-box {
		background: url('../static/housekeeping/yh_bg.png') center center no-repeat;
		background-size: 100%;
		padding: 30rpx;
		border-radius: 50rpx;
	}

	.add-count {
		position: absolute;
		right: 10rpx;
		top: 0;
		height: 100%;
		display: flex;
		align-items: center;
		width: 200rpx;
		justify-content: center;

		text {
			background-color: rgba(#000, 0.5);
			border-radius: 50rpx;
			color: #fff;
			padding: 10rpx 30rpx;
		}
	}

	.fix-bot {
		bottom: 20rpx;
	}

	.yhq_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
</style>